<template>
	<view class="">
		<view class="bill-header">
			<template v-if="!$slots.header">
				<h4 class="bill-title" v-if="title" v-text="title"></h4>
				<view class="bill-no" v-if="no">NO.{{no}}</view>
			</template>
			<template v-else>
				<slot name="header"></slot>
			</template>
		</view>
		<view class="bill-neck">
			<span></span>
		</view>
		<view class="bill-content">
			<view class="bill-detail">
				<slot></slot>
			</view>
			<view v-if="$slots.footer" class="bill-footer">
				<slot name="footer"></slot>
			</view>
		</view>
	</view>
	</water-mark>
</template>

<script>
	export default {
		name: 'bill',

		components: {

		},
		props: {
			title: {
				type: String,
				default: '',
			},
			no: {
				type: [String, Number],
				default: '',
			},
			waterMark: {
				type: String,
				default: '',
			},
		},
	}
</script>

<style lang="scss">
	.bill {
		position: relative;
		background: #FFF;
	}

	.bill-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 28px 32px 8px;
	}

	.bill-title {
		color: #41485d;
		font-size: 36upx;
		font-weight: 500;
		font-family: Songti SC;
	}

	.bill-no {
		color: #c5cad5;
		font-size: 24upx;
	}

	.bill-neck {
		position: relative;
		height: 24px;
		padding: 10px;
		margin: 0 28px;
		box-sizing: border-box;

		span {
			position: absolute;
			display: block;
			top: 50%;
			left: 10px;
			right: 10px;
			height: 1px;
			border-top: 1px dashed #c5cad5;
		}

		&::after,
		&::before {
			content: '';
			position: absolute;
			top: 0;
			width: 24px;
			height: 24px;
			border-radius: 12px;
			background-color: #F1F0F5;
		}

		&::before {
			left: -40px;
		}

		&::after {
			right: -40px;
		}
	}

	.bill-content {
		padding: 0 32px 20px 32px;
	}

	.bill-detail {
		padding-bottom: 40px;
	}
</style>
